import React from 'react';
import {Button} from 'antd';
import {WeaDialog, WeaTransfer} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

// 元素数据来源，排序字段
class Content_8_DataSource_OrderCol extends React.Component {
    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onOrderTypeChange = this.onOrderTypeChange.bind(this);

        this.state = {
            visible: true,
            orderColDataSource: props.orderColDataSource || [],
            orderColUsedKeys: props.orderColUsedKeys || []
        };
    }

    render() {
        const {visible, orderColDataSource, orderColUsedKeys} = this.state;

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@7h88o3`}
                visible={visible}
                title={getLabel(386541, '排序字段设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 500, height: 312}}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@zb88tn`}
                    height={300}
                    data={orderColDataSource}
                    selectedKeys={orderColUsedKeys}
                    renderItem={
                        item => {
                            if(item.orderType == '') item.orderType = '0';
                            let orderTypeComp = <div></div>;
                            if (orderColUsedKeys.indexOf(item.key) != -1) {
                                orderTypeComp = (
                                    <span style={{float: 'right', cursor: 'pointer'}} onClick={e => this.onOrderTypeChange(e, item)} onDoubleClick={e => e.stopPropagation()}>
                                        {item.orderType == '0' ? getLabel(340, '降序') : getLabel(339, '升序')}
                                    </span>
                                );
                            }

                            return (
                                <div style={{height: '37px', lineHeight: '37px', padding: '0 15px', borderBottom: '1px solid #e2e2e2'}} title={item.fieldName}>
                                    <span>{item.fieldName}</span>
                                    {orderTypeComp}
                                </div>
                            );
                        }
                    }
                    onChange={(keys) => this.setState({orderColUsedKeys: keys})}
                />
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@87ccsn`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nahgws`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk() {
        this.props.onOk(this.state);
    }

    onCancel() {
        this.props.onCancel();
    }

    onOrderTypeChange(e, item) {
        e.preventDefault && e.preventDefault();
        e.stopPropagation && e.stopPropagation();
        const {orderColDataSource:ds} = this.state;
        for (let i = 0, len = ds.length; i < len; i++) {
            if (ds[i].key == item.key) {
                ds[i].orderType = ds[i].orderType == '0' ? '1' : '0';
            }
        }

        this.setState({orderColDataSource: ds})
    }
}

export default Content_8_DataSource_OrderCol;
